import { Component, OnInit } from '@angular/core';
import { Hero } from '../hero';
import { HeroService } from '../hero.service';
import { MessageService } from '../message.service';
@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {
  // hero='Windstorm'
  // hero:Hero={
  //   id:1,
  //   name:'Windstorm'
  // }
  add(name:string):void{
    name=name.trim();
    if(!name){return}
    this.heroService.addHero(
      {name} as Hero
    ).subscribe((hero: any)=>{this.heroes.push(hero)})
  }
  delete(hero: Hero): void {
    this.heroes = this.heroes.filter(h => h !== hero);
    this.heroService.deleteHero(hero.id).subscribe();
  }
  // heroes=HEROES
  heroes:Hero[]=[]
  selectedHero?:Hero
  constructor(private heroService:HeroService) { }
  getHeroes():void{
    this.heroService.getHeroes().subscribe(heroes=>this.heroes=heroes);
  }
  ngOnInit(): void {
    this.getHeroes()
  }

}
